<template>
  <div class="app-container">

    <el-tabs v-model="activeName" v-if="showCard">
      <el-tab-pane label="领料单信息" name="first">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
          label-width="68px">
          <el-form-item label="领料日期">
            <el-date-picker type="daterange" v-model="queryParams.date" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" clearable style="width: 240px" />
          </el-form-item>
          <el-form-item label="领料人">
            <el-input v-model="queryParams.requestman" placeholder="请输入领料人"></el-input>
          </el-form-item>
          <el-form-item label="领料单号">
            <el-input v-model="queryParams.requestOrderNo" placeholder="请输入领料单号"></el-input>
          </el-form-item>
          <el-form-item label="领料部门">
            <el-input v-model="queryParams.requestDept" placeholder="请输入领料部门"></el-input>
          </el-form-item>
          <el-form-item label="物品属性">
            <el-input v-model="queryParams.item" placeholder="请输入物品属性"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>

        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
              @click="handleDelete">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>


        <el-tooltip placement="top">
          <div slot="content">点击任意一行列，即可在下方查看领料单明细记录</div>
          <el-table :data="orderdata" v-loading="loading" @row-click="showTab" :row-class-name="rowClassName">
            <el-table-column label="领料单号" prop="requestOrderNo"></el-table-column>
            <el-table-column label="领料人" prop="requestman"></el-table-column>
            <el-table-column label="领料部门" prop="requestDept"></el-table-column>
            <el-table-column label="领料日期" prop="requestDay"></el-table-column>
            <el-table-column label="物品属性" prop="attribute"></el-table-column>
            <el-table-column label="备注" prop="remark"></el-table-column>
            <el-table-column label="制单人" prop="producer"></el-table-column>
            <el-table-column label="制单日期" prop="ProductDay"></el-table-column>
            <el-table-column label="修改人" prop="editman"></el-table-column>
            <el-table-column label="修改日期" prop="editDay"></el-table-column>
            <el-table-column label="审核人" prop="Reviewer"></el-table-column>
            <el-table-column label="审核信息" prop="revieinform"></el-table-column>
            <el-table-column label="审核级别" prop="revilevel"></el-table-column>
            <el-table-column label="审核时间" prop="revitime"></el-table-column>
            <el-table-column label="操作" align="center" width="150px" fixed="right">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tooltip>

        <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
          :total="total" />

        <el-tabs v-model="activeName" v-if="showCard">
          <el-tab-pane label="领料单明细" name="first">
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
              </el-col>
              <!-- <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
              >修改</el-button>
            </el-col> -->
              <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                  @click="handleDelete">删除</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
              </el-col>
              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>
            <h2 align="center">{{ requestOrderNo }}领料单明细</h2>
            <el-table :data="PurchaseDate">
              <el-table-column align="center" label="物料描述">
                <el-table-column align="center" label="代号" />
                <el-table-column align="center" label="名称" />
                <el-table-column align="center" label="规格" />
                <el-table-column align="center" label="转换率" />
              </el-table-column>
              <el-table-column align="center" label="颜色" />
              <el-table-column align="center" label="属性" />
              <el-table-column align="center" label="合同号" />
              <el-table-column align="center" label="主单位">
                <el-table-column align="center" label="领用数量" />
                <el-table-column align="center" label="单位" />
              </el-table-column>
              <el-table-column align="center" label="副单位">
                <el-table-column align="center" label="领用数量" />
                <el-table-column align="center" label="单位" />
              </el-table-column>
              <el-table-column align="center" label="合同号" />
              <el-table-column align="center" label="批号" />
              <el-table-column align="center" label="货位" />
              <el-table-column label="操作" align="center" width="150px" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                  <el-button size="mini" type="text" icon="el-icon-delete"
                    @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>

        <!-- 订单表 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
          <el-form :model="form" :rules="rules" ref="form" label-width="100px">
            <el-form-item label="合同日期" prop="contractDate">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.contractDate" style="width: 240px;" />
            </el-form-item>
            <el-form-item label="销售员" prop="salesperson">
              <el-input v-model="form.salesperson" placeholder="请输入销售员" style="width: 240px;" />
            </el-form-item>
            <el-form-item label="合同号" prop="Contract">
              <el-input v-model="form.Contract" placeholder="请输入合同号" style="width: 240px;" />
            </el-form-item>
            <el-form-item label="客户" prop="customer">
              <el-input v-model="form.customer" placeholder="请输入客户" style="width: 240px;" />
            </el-form-item>
            <el-form-item label="订单编号" prop="OrderNumber">
              <el-input v-model="form.OrderNumber" placeholder="请输入订单号" style="width: 240px;" />
            </el-form-item>
            <el-form-item label="订单类型" prop="OrderType">
              <el-select v-model="form.OrderType" placeholder="请选择订单类型" style="width: 240px;">
                <el-option label="销售订单" value="销售订单"></el-option>
                <el-option label="采购订单" value="采购订单"></el-option>
                <el-option label="委托加工订单" value="委托加工订单"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>



  </div>
</template>

<script>
export default {
  data() {
    return {
      requestOrderNo: '',
      radio: 1,
      checked: 1,
      activeName: 'first',
      showCard: true,
      showSearch: true,
      orderdata: [{
        requestOrderNo: 'RON123456',
        requestman: '领料人A',
        requestDept: '密胺生产部',
        // customerContractNo: '123456',
        requestDay: '2021-01-01',
        attribute: '属性A',
        remark: '备注1',
        producer: '',
        ProductDay: '',
        editman: '',
        editDay: '',
        Reviewer: '',
        revieinform: '',
        revilevel: '',
        revitime: '',
      }],
      queryParams: {
        date: ''
      },
      SaleReturn: [],
      Other: [],
      form: {
        staff: '',
        date: '',
        accountant: '',
        modifier: '',
        createDate: '',
        auditDate: '',
        auditor: '',
        auditInfo: '',
        auditLevel: ''
      }
    }
  },
  methods: {
    // 显示高亮
    rowClassName({ row }) {
      return row.requestOrderNo == this.requestOrderNo ? 'selected-row' : ''; // 判断是否选中
    },
    showTab(row) {
      this.requestOrderNo = row.requestOrderNo;
    },
    handleSelectionChange(val) {
      console.log(val)
    },
    submitForm() {
      this.open = false;
    },
    cancel() { this.open = false; },
    handleQuery() {
      this.loading = false;
    },
    resetQuery() {
    },
    handleAdd() {
      this.title = '新增订单'
      this.open = true;
      this.isEdit = false;
    },
    handleUpdate(row) {
      this.title = '编辑订单'
      this.open = true;
      this.isEdit = false;
      this.form = row;
    },
    handleAddComm() {
      this.titleComm = '新增订单明细'
      this.openComm = true;
    },
    handleUpdateComm(row) {
      this.titleComm = '编辑订单明细'
      this.openComm = true;
      this.formComm = row;
    },
    hand() {
      this.queryParams.rate = (this.queryParams.currency == 1) ? 1 : 7;
    },
  }
}
</script>
<style>
.selected-row {
  background-color: yellow !important;
  /* 选中行的背景颜色 */
}
</style>
